<template>
  <div ref="mapContainer" class="content">
    <a-radio-group v-model="value1" button-style="solid" @change="handlerChange">
      <a-radio-button value="0">性别</a-radio-button>
      <a-radio-button value="1">年龄</a-radio-button>
    </a-radio-group>
  </div>

</template>

<script>
import * as zymap from '../zymap.min.js'
import data from "@/assets/demoData/changshadayuecheng20211207.json";

export default {
  name: "routeMapVersion2",
  data() {
    return {
      zymap: null,
      checkTheType: undefined,//查看类型
      value1: '0',//显示类型，0-性别，1-年龄
      lineWidth: 3,//路径宽度
      sexOptions: [
        {
          id: 0,
          name: '男性',
          color: '#73d13d'
        },
        {
          id: 1,
          name: '女性',
          color: '#40a9ff'
        }
      ],
      currentLines: [],
      ages: [{
        label: '少年', id: 0
      }, {
        label: '青年', id: 1
      }, {
        label: '资深青年', id: 2
      }, {
        label: '中年', id: 3
      }, {
        label: '老年', id: 4
      }],//年纪
      ageToDistinguish: [
        {min: 0, max: 20},
        {min: 21, max: 25},
        {min: 26, max: 35},
        {min: 35, max: 45},
        {min: 46, max: 100}
      ],//年龄划分
      colors: ['#ff4d4f', '#ff7a45', '#40a9ff', '#36cfc9', '#9254de'],//路径颜色
    }
  },
  // components:{DownOutlined},
  mounted() {

    this.$nextTick(() => {
      this.initMap();
    })
  },

  methods: {

    /**
     * 初始化地图
     */
    initMap() {
      this.zymap = new zymap.ZYMap({
        serverUrl: 'http://map.malllead.com',
        buildingCode: '0001-000H-0005',
        container: this.$refs.mapContainer,
        floorCode: '0001-000H-0005-0002',
        viewMode: '2d',
        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxMDAxMDAwMSIsImV4cCI6MTY0MDY3MzQwOX0.yPaFn-mN72lEgstnMbrP224wzyeOaN_CYN6K5oxNtcg'
      })
      console.log('zymap', this.zymap)
      this.zymap.on('floorChanged', this.afterFloorChange.bind(this))
    },
    afterFloorChange() {
      this.value1 = '0';
      this.clearCurrentLines();
      this.addSexLines()
    },
    addSexLines() {
      const data = require('@/assets/demoData/changshadayuecheng20211207.json')
      const sexOptions = this.sexOptions
      sexOptions.forEach((sexOption, index, arr) => {
        let classification = this.fnGenderClassification(data, sexOption.id);
        let lines = this.fnOffsetCoordinates(classification, index);
        console.log('lines', sexOption.name, lines)
        for (const line of lines) {
          const line2 = new zymap.ZYLineMarker({
            segments: line,
            width: this.lineWidth, //线宽
            color: sexOption.color,
            height: 200
          })
          line2.addTo(this.zymap)
          this.currentLines.push(line2)
        }
      })
    },
    addAgeLines() {
      const data = require('@/assets/demoData/changshadayuecheng20211207.json')
      let ages = this.ages;
      let colors = this.colors;
      let currentIndex = 0;
      ages.forEach((ageObj, index) => {
        let classification = this.fnAgeClassification(data, ageObj.id);
        if (classification.length > 0) {
          let lines = this.fnOffsetCoordinates(classification, currentIndex);
          currentIndex += 1;
          for (const line of lines) {
            const line2 = new zymap.ZYLineMarker({
              segments: line,
              width: this.lineWidth,
              color: colors[index],
              height: 200
            })
            line2.addTo(this.zymap)
            // line2.translate(index*this.lineWidth, index*this.lineWidth)
            this.currentLines.push(line2)
          }
        }

      })
    },
    /**
     * 性别分类
     */
    fnGenderClassification(data, type) {
      let newList = [];
      for (const datum of data) {
        const sex = datum.sex;
        if (sex == type) {
          const points = datum.points;
          newList.push(points);
        }
      }
      return newList;
    },
    /**
     * 年龄分类
     * @param data
     * @param type
     */
    fnAgeClassification(data, type) {
      let newList = [];
      let ageToDistinguish = this.ageToDistinguish[type];
      for (const datum of data) {
        const age = datum.age;
        if (age >= ageToDistinguish.min && age <= ageToDistinguish.max) {
          const points = datum.points;
          newList.push(points);
        }
      }
      return newList;
    },
    /**
     * 坐标偏移
     * @param data
     * @param currentIndex
     * @returns {*}
     */
    fnOffsetCoordinates(data, currentIndex) {
      data.forEach((datum, index, arr) => {
        datum.forEach((datumElement, index, arr) => {
          let x = datumElement.x
          let y = datumElement.y
          datumElement.y = y + currentIndex * this.lineWidth
          datumElement.x = x + currentIndex * this.lineWidth
        })
      })
      return data
    },
    /**
     * 清除路径
     */
    clearCurrentLines() {
      this.currentLines.forEach((item) => {
        item?.remove()
      })
    },
    handlerChange(e) {
      console.log('e', this.value1)
      this.clearCurrentLines();
      if (this.value1 == 0) {
        this.addSexLines()
      } else if (this.value1 == 1) {
        this.addAgeLines()
      }
    }
  },
  beforeDestroy() {
    this.clearCurrentLines();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
html, body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
}

.content {
  width: 100vw;
  height: 100vh;
  flex-shrink: 1;
  position: relative;
  box-sizing: border-box;
}
</style>
